<template>
  <svg aria-hidden="true" :class="props.className">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<!-- SvgIcon组件，可将svg图标直接当组件使用 -->
<script setup>
import { computed } from 'vue';
/**
 * 输入属性             类型                默认值              是否必选                描述
 *  name              string             undefined              是                  svg图标名字
 *  className         string             svg                    否                  svg类名字
 */
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  className: {
    type: String,
    default: 'svg',
  },
});

// 获取svg图标名称，需要和vite.config.ts中的配置保持一致
const symbolId = computed(() => {
  return `#${props.name}`;
});
</script>

<style scoped></style>
